<template>
  <div class="container">
    <!-- 配置区域 -->
    <div class="config-panel">
      <h2>字帖配置</h2>
      <div class="form-item">
        <label>书写内容：</label>
        <textarea v-model="config.content" rows="4"></textarea>
      </div>
      <div class="form-item">
        <label>字体：</label>
        <select v-model="config.fontFamily">
          <option value="楷体">楷体</option>
          <option value="宋体">宋体</option>
          <option value="仿宋">仿宋</option>
        </select>
      </div>
      <div class="form-item">
        <label>字号：</label>
        <input type="number" v-model.number="config.fontSize">
      </div>
      <div class="form-item">
        <label>网格类型：</label>
        <select v-model="config.gridType">
          <option value="tian">田字格</option>
          <option value="mi">米字格</option>
          <option value="square">方格</option>
        </select>
      </div>
      <button @click="generate">生成字帖</button>
    </div>

    <!-- 预览区域 -->
    <div class="preview">
      <canvas ref="canvas"></canvas>
      <button @click="print" class="print-btn">打印字帖</button>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref, watchEffect } from 'vue'

const config = reactive({
  content: '永字八法',
  fontFamily: '楷体',
  fontSize: 60,
  gridType: 'tian',
  gridSize: 100
})

const canvas = ref(null)
let ctx = null

watchEffect(() => {
  if (canvas.value) {
    initCanvas()
    drawGrid()
    drawText()
  }
})

function initCanvas() {
  ctx = canvas.value.getContext('2d')
  const dpr = window.devicePixelRatio || 1
  const rect = canvas.value.getBoundingClientRect()
  canvas.value.width = rect.width * dpr
  canvas.value.height = rect.height * dpr
  ctx.scale(dpr, dpr)
  ctx.clearRect(0, 0, canvas.value.width, canvas.value.height)
}

function drawGrid() {
  const cols = Math.floor(canvas.value.width / config.gridSize)
  const rows = Math.floor(canvas.value.height / config.gridSize)
  
  ctx.strokeStyle = '#ddd'
  ctx.lineWidth = 1
  
  for (let i = 0; i <= cols; i++) {
    for (let j = 0; j <= rows; j++) {
      const x = i * config.gridSize
      const y = j * config.gridSize
      
      // 绘制外框
      ctx.strokeRect(x, y, config.gridSize, config.gridSize)
      
      // 绘制内部辅助线
      if (config.gridType === 'tian') {
        ctx.beginPath()
        ctx.moveTo(x, y + config.gridSize/2)
        ctx.lineTo(x + config.gridSize, y + config.gridSize/2)
        ctx.moveTo(x + config.gridSize/2, y)
        ctx.lineTo(x + config.gridSize/2, y + config.gridSize)
        ctx.stroke()
      } else if (config.gridType === 'mi') {
        ctx.beginPath()
        ctx.moveTo(x, y)
        ctx.lineTo(x + config.gridSize, y + config.gridSize)
        ctx.moveTo(x + config.gridSize, y)
        ctx.lineTo(x, y + config.gridSize)
        ctx.stroke()
      }
    }
  }
}

function drawText() {
  ctx.font = `${config.fontSize}px ${config.fontFamily}`
  ctx.textAlign = 'center'
  ctx.textBaseline = 'middle'
  ctx.fillStyle = '#333'

  const chars = config.content.split('')
  const cols = Math.floor(canvas.value.width / config.gridSize)
  
  chars.forEach((char, index) => {
    const col = index % cols
    const row = Math.floor(index / cols)
    const x = col * config.gridSize + config.gridSize/2
    const y = row * config.gridSize + config.gridSize/2
    ctx.fillText(char, x, y)
  })
}

function print() {
  window.print()
}
</script>

<style>
@media print {
  .config-panel, .print-btn {
    display: none !important;
  }
  canvas {
    width: 100% !important;
    height: auto !important;
  }
}

.container {
  display: flex;
  gap: 20px;
  padding: 20px;
}

.config-panel {
  width: 300px;
  padding: 20px;
  background: #f5f5f5;
  border-radius: 8px;
}

.form-item {
  margin-bottom: 15px;
}

.form-item label {
  display: block;
  margin-bottom: 5px;
}

.preview {
  flex: 1;
  background: white;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

canvas {
  width: 100%;
  height: 80vh;
  background: white;
}

button {
  background: #409eff;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}
</style>